<template>
    <div>
        <HeaderTop :title="'搜索'"></HeaderTop>

        <div class="content">
            <div class="search">
                <form action="" @submit.prevent="search">
                    <input class="search_input" type="text" placeholder="请输入关键字" v-model="keywords">

                    <input class="search_submit" type="submit" value="搜索" >
                </form>
            </div>

            <div class="shop_list">
                <ul v-if="searchShops.length">
                    <li class="border-1px" v-for="(searchShop , index) in searchShops" :key="index">
                        <div class="shop_img">
                            <img :src="searchShop.imgUrl" alt="店铺图片">
                        </div>
                        <div class="shop_des">
                            <div>{{searchShop.name}}</div>
                            <div>月销售{{searchShop.count}}单</div>
                            <div>{{searchShop.deliveryPrice}}元起送</div>
                        </div>
                    </li>
                </ul>
                <div class="no_shop" v-if="showNoShops">抱歉没有搜索到，请重新搜索哦!</div>
                <div class="aa">hhhhhhhhhhhhhhhhh</div>
                <div class="bb">
                     aaaaaaa aaaaaaa aaaaaaaaaaaaaa好sssssss sssssdg好  ffffff了ffff ffffffffffff就fwww了wwwwwwwwwwwffffffff
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import {mapState} from 'vuex'
    import HeaderTop from '../../components/HeaderTop/HeaderTop'
    export default {
        name: "Search",
        data(){
          return {
              keywords:"",
              showNoShops:false
          }
        },
        components:{
            HeaderTop
        },
        computed:{
            ...mapState(["searchShops"])
        },
        methods:{
            search(){

                const keyword=this.keywords;
                this.$store.dispatch("searchShop",keyword);
                //console.log('默认提交');

            }
        },
        watch:{
            searchShops(value){
                if (!value.length){ //没有有搜索结果(没有结果时候是个对象，没有这个length属性。)
                    this.showNoShops=true
                }else{
                    this.showNoShops=false
                }
            }
        },
        mounted(){
          //  this.scroll=new BScroll(document.getElementsByClassName("fi")[0],{})
        }
    }
</script>

<style lang="stylus" scoped>
    @import '../../assets/mixin.styl'
.content
    //background:red
    position:fixed
    top:1rem
    left:0
    right:0
    bottom:1rem
    overflow hidden
    padding:0.3rem 0.2rem
    .search
        form
            width:100%
            clearFix()
            //background:hotpink
            .search_input
                float:left
                height:0.8rem
                border-radius:5px
                width:80%
                font-size:0.35rem
                color:#3c3c3c
                border:1px solid #6a6a6a
            .search_submit
                float:right
                height:0.8rem
                width:18%
                font-size:0.35rem
                color: #ffffff
                background:green
                border-radius:5px


    .shop_list
        position:absolute
        left:0
        top:1.5rem
        bottom:0
        width:100%
        li
            display:flex
            padding-bottom:0.2rem
            bottom-border-1px(#ccc)
            .shop_img
                width:1.5rem
                height:1.5rem
                padding-left:0.2rem
                font-size:0.4rem
                img
                    display:block
                    width: 100%
                    height: 100%
            .shop_des
                flex:1
                font-size:0.3rem
                padding-left:0.2rem
                div
                    height:0.5rem
                    line-height:0.5rem
        .no_shop
            font-size:0.3rem
            padding:0.3rem
            text-align:center
        .aa
            width:3rem
            height:1rem
            background:green
            font-size:0.6rem
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
        .bb
            width:2rem
            text-align:center
            font-size:0.3rem
            height:5rem
            background:red
            //overflow-wrap:break-word
            border:1px solid green


</style>
